<template>
  <view class="container backgroundlinear">
    <view class="title"> 发起团购 </view>
    <div
      class="btn btn_1"
      @click="getbtn1()"
      :class="qcodeBtn1img ? 'btnbg' : ''"
    >
      <div
        v-if="qcodeBtn1img"
        style="display: flex; align-content: space-around"
      >
        <img
          :src="qcodeBtn1img"
          alt=""
          style="width: 100px; height: 100px"
          @click="downloadImage(qcodeBtn1img)"
        />

        <button
          type="primary"
          open-type="share"
          :plain="true"
          id="110"
          :hairline="true"
          style="
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 24px;
            padding: 0;
          "
        >
          点击分享
        </button>
      </div>
      <div v-else class="text"></div>
    </div>
    <view class="title"> 扫码支付 </view>
    <div
      class="btn btn_2"
      @click="getbtn2"
      style="display: flex; align-content: space-around"
      :class="qcodeBtn1img2 ? 'btnbg' : ''"
    >
      <div v-if="qcodeBtn1img2" style="">
        <img
          :src="qcodeBtn1img2"
          alt=""
          style="width: 100px; height: 100px"
          @click="downloadImage(qcodeBtn1img2)"
        />
      </div>
      <div v-else class="text"></div>
    </div>
    <view class="title"> 免费拉新 </view>
    <div
      class="btn btn_3"
      @click="getbtn3"
      :class="specListstate ? 'btnbg' : ''"
    ></div>
  </view>

  <u-popup
    v-model="show"
    :round="10"
    mode="bottom"
    @close="show = false"
    closeable
  >
    <div
      style="
        height: 40px;
        line-height: 40px;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        padding-left: 20rpx;
      "
    >
      选择规格
    </div>
    <view style="padding: 30rpx 20rpx; min-height: 200px">
      <!--  <u-tag v-for="(item,index) in specList" :key="index" @click="clicktag(item)" :text="item.goodsName" plain > </u-tag> -->
      <!--  <u-tabs-swiper ref="tabs" name="cate_name" count="cate_count" :list="specList" :current="current" :is-scroll="true"></u-tabs-swiper> -->
      <u-tabs
        :list="specList"
        :is-scroll="false"
        :current="current"
        @change="tabschange"
      ></u-tabs>
      <div
        style="
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        "
        v-for="(itemimg, indeximg) in specList"
        :key="indeximg"
      >
        <div
          style="margin: 10rpx"
          v-show="current == indeximg"
          v-for="(imglistitem, imglistindex) in itemimg.imglist"
          :key="imglistindex"
        >
          <img
            style="width: 200rpx; height: 200rpx"
            :src="baseUrl + 'api/uploads/' + imglistitem"
            @click="downloadImage(baseUrl + 'api/uploads/' + imglistitem)"
          />
        </div>
      </div>
    </view>
  </u-popup>
</template>

<script lang="ts" setup>
import {
  apigenerationgenerateGratisQR,
  apigenerationgenerateScanPay,
  apiGoodsbtn1,
  apiGoodsList,
  apispecificationlist,
} from "@/api/buyOrder";
import { useAppStore } from "@/stores/app";
import UCellItem from "@/uni_modules/vk-uview-ui/components/u-cell-item/u-cell-item.vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted } from "vue";
const opid = ref();
const qcodeBtn1img = ref();
const qcodeBtn1img2 = ref();
const qcodeBtn1img3 = ref();
const show = ref(false);
const specList = ref([]);
const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ""}/`;
const getbtn1id = ref();
const current = ref(0);
const specListstate = ref(false);
onLoad((options: any) => {
  opid.value = options.id;
});
const getbtn1 = async () => {
  if (!getbtn1id.value) {
    let res = await apiGoodsbtn1({ goodsId: opid.value });
    console.log(res);
    qcodeBtn1img.value = baseUrl + "api/uploads/" + res.url;
    getbtn1id.value = res.id;
    uni.setStorageSync("getbtn1id", res.id);
  }
};

const getbtn2 = async () => {
  if (!qcodeBtn1img2.value) {
    let res = await apigenerationgenerateScanPay({ goodsId: opid.value });
    console.log(res);
    qcodeBtn1img2.value = baseUrl + "api/uploads/" + res;
  }
};

const getbtn3 = async () => {
  let res = await apispecificationlist({ goodsId: opid.value });
  console.log(res);
  show.value = true;
  res.lists.forEach((item: any, index: any) => {
    item.name = item.goodsName + item.name;
  });
  specList.value = res.lists;
  tabschange(0);
  specListstate.value = true;
};

const tabschange = async (index: any) => {
  current.value = index;

  let item = specList.value[index];

  let res = await apigenerationgenerateGratisQR({
    goodsSpecificationId: item.goodsSpecificationId,
    goodsNum: 1,
    goodsId: opid.value,
  });
  console.log(res);
  specList.value[index].imglist = res;
};

const downloadImage = (imageSrc: any) => {
  wx.downloadFile({
    url: imageSrc, //仅为示例，并非真实的资源
    success(res) {
      // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
      if (res.statusCode === 200) {
        console.log(res);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              icon: "none",
              title: "保存成功",
            });
          },
          fail: function (err) {
            if (
              err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
              err.errMsg === "saveImageToPhotosAlbum:fail auth deny" ||
              err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
            ) {
              wx.showModal({
                title: "提示",
                content: "需要您授权保存相册",
                showCancel: false,
                success: (modalSuccess) => {
                  wx.openSetting({
                    success(settingdata) {
                      if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                        console.log(
                          "获取权限成功，给出再次点击图片保存到相册的提示。"
                        );
                      } else {
                        console.log(
                          "获取权限失败，给出不给权限就无法正常使用的提示"
                        );
                        wx.showToast({
                          icon: "none",
                          title: "暂未授权，保存失败",
                        });
                      }
                    },
                  });
                },
              });
            } else {
              wx.showToast({
                icon: "none",
                title: "保存失败",
              });
            }
          },
        });
      }
    },
  });
};
</script>

<style lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  padding: 30rpx;

  .btn {
    width: 100%;
    margin-bottom: 30rpx;
    height: 115px;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .btn_1 {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/8bb818a7-79a1-40f8-a12f-acb039e5322c.png");
    background-size: 100% 100%;
  }
  .btn_2 {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/b7f1ef03-5aa9-4cae-b15d-0ceb243d63aa.png");
    background-size: 100% 100%;
  }
  .btn_3 {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/6bf9c761-e4b6-40fc-809f-d3aa4d1a6af4.png");
    background-size: 100% 100%;
  }
  .btn_1.btnbg {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/19951880-0cf0-484d-b845-4e4adafa1e6c.png");
    background-size: 100% 100%;
  }
  .btn_2.btnbg {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/d0d5970c-d4df-4dba-bcc4-2c15d1443a68.png");
    background-size: 100% 100%;
  }
  .btn_3.btnbg {
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20241110/84c02854-88d8-45fd-9cea-dc2e15362f19.png");
    background-size: 100% 100%;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    line-height: 40px;
  }
}
</style>
